<script setup lang="ts">
import { useTemplateRef, watch } from 'vue';
import MyForm from '@/components/custom/my-form.vue';
import { addVisible, formConfig, onCancel, onConfirm, ruleForm } from '../information';
const formRef = useTemplateRef('mFormRef');
watch(
  () => addVisible.value,
  newValue => {
    if (!newValue && formRef.value) formRef.value.resetFields();
  }
);
</script>

<template>
  <ElDialog v-model="addVisible" title="新增" width="800px" align-center :before-close="onCancel">
    <MyForm ref="mFormRef" v-model="ruleForm" v-bind="formConfig" />
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="onCancel">取消</ElButton>
        <ElButton type="primary" @click="onConfirm">确认</ElButton>
      </span>
    </template>
  </ElDialog>
</template>
